<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 后台主题UI框架 - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="__STATIC__/layout/favicon.ico">
     <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__STATIC__/layout/css/font-awesome.css?v=4.4.0" rel="stylesheet">
     <!-- jqgrid-->
    <link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
</head>

<body style="color:#333;padding:3px;">
    <div class="row-margin-top">
    <form action=""  class="form-inline">
      <table class="row-margin-top tab-content table-bordered  table" border="1" style="margin-bottom: 0">
            <tr>
            <td>&nbsp;财年：
            <select name="" id="" class="form-control">
              <option value="0">2017</option>
            </select>
            <span class="lr_5"></span>
            所属经销商：
            <input type="text" class="form-control" placeholder="请输入关键字或空格查询">
            <a href="javascript:;">选择</a>
            <span class="lr_5"></span>
            <button class="btn btn-info query">查询</button>
             <span class="lr_5"></span>
             <button class="btn btn-info LendExcel" type="button">导出Excel</button>
            </td>
            </tr>
           <tr>
            <td class="text-left">
               <p class="text-center font-bold padding-10">财年各科目与总费用占比</p>
               <p class="text-right padding-10">单位(万元)</p>
               <p class="colorRed padding-10">说明：1、费用包括：常规促销申请费用、非常规促销申请费用和进场申请费用中可核销的部分</p>
            </td>
            </tr>
      </table>
      <table class="table table-bordered" style="margin:0;padding: 0;display: none;" id="showIf_table">
        <tr>
        <td style="width: 140px;">您选定的经销商是：</td>
        <td></td>
        <td style="width: 80px;color:blue;cursor: pointer;" id="emptythis">清空</td>
        </tr>
      </table>
          <div class="row" style="margin:0;padding: 10px 0">
              <div class="col-md-6" style="margin:0 10px ">
               		<h2 class="text-center">2017财年二级科目费用与总费用占比</h2>
               <div style="background: #dedfde;height:360px;">
				   <div class="echarts" id="echarts-pie-chart" style="width: 100%;height:360px;font-size:20px;display: none;" ></div>
               </div>
              </div>
               <div class="col-md-5">
                    <table class="row-margin-top table-bordered table" >
               <tr class="info">
                  <th class="text-center">一级费用科目</th>
                  <th class="text-center">二级费用科目</th>
                  <th class="text-center">科目</th>
                  <th class="text-center">占比</th>
                  <th class="text-center">投入额</th>
               </tr>
               <tbody>
                 <!--  <tr>
                    <td>销售费用</td>
                    <td>活动费</td>
                    <td>DM费</td>
                    <td class="text-right"><span class="ObjectNum">0.63</span>%</td>
                    <td class="ObjectNum">5.50</td>
                  </tr>
                   <tr>
                    <td>销售费用</td>
                    <td>活动费</td>
                    <td>DM费</td>
                    <td class="text-right"><span class="ObjectNum">0.63</span>%</td>
                    <td class="ObjectNum">5.50</td>
                  </tr>
                   <tr>
                    <td>销售费用</td>
                    <td>活动费</td>
                    <td>DM费</td>
                    <td class="text-right"><span class="ObjectNum">0.63</span>%</td>
                    <td class="ObjectNum">5.50</td>
                  </tr>
                   <tr>
                    <td>销售费用</td>
                    <td>活动费</td>
                    <td>DM费</td>
                    <td class="text-right"><span class="ObjectNum">0.63</span>%</td>
                    <td class="ObjectNum">5.50</td>
                  </tr>
                   <tr>
                    <td>销售费用</td>
                    <td>活动费</td>
                    <td>DM费</td>
                    <td class="text-right"><span class="ObjectNum">0.63</span>%</td>
                    <td class="ObjectNum">5.50</td>
                  </tr> -->
               </tbody>
               <tfoot>
                  <tr class="trTotal text-right">
                    <td colspan="3"></td>
                    <td>总计：</td>
                    <td>868.77</td>
                  </tr>
               </tfoot>
            </table>
               </div>
          </div>
</form>
    </div>
    <!-- 全局js -->
    <script src="__STATIC__/layout/js/jquery.min.js?v=2.1.4"></script>
    <script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> -->
    <script src="__STATIC__/layout/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
      <script src="__STATIC__/layout/js/common.js"></script>
      <script src="__STATIC__/layout/js/plugins/echarts/echarts-all.js"></script>
    <script>
       $(document).ready(function(){
            var $ObjectNum =$(".ObjectNum");
               toNum($ObjectNum);


        /*清空*/
        $(document).on("click","#emptythis",function(){
          $(this).parent().remove();
        })
             });

        $(function(){
            /*饼状图*/
            var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
       var pieoption = {
        title : {
            text: '',
            subtext: true,
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : '10%',
            data:['特价补差费','活动费','促销员工资','新品开发费','进场费']
        },
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '60%',
                selectedMode: 'single', //单一选中模式 
                center: ['50%', '60%'],
                data:[
                    {value:4982, name:'特价补差费'},
                    {value:8489044.98, name:'活动费'},
                    {value:419.76, name:'促销员工资'},
                    {value:9540, name:'新品开发费'},
                    {value:9540, name:'进场费'}
                ],
                itemStyle:{  
                emphasis: {  
                    shadowBlur: 10,  
                    shadowOffsetX: 0,  
                    shadowColor: 'rgba(0, 0, 0, 0.5)'  
                }  
              }  
            }
        ]
    };
    pieChart.setOption(pieoption);
    $(window).resize(pieChart.resize);
  })
    </script>

</body>

</html>
